import React from 'react';
import Link from 'next/link';
import { ArrowLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
import ChatBotInfo from './ChatBotInfo';
import SettingsOption from './SettingsOption';

const ChatSettings: React.FC = () => {
  const chatHistory = [
    { title: '机器人名称', date: '24/12/02' },
    { title: '规划一下广州三日游', date: '24/10/30' },
  ];

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="flex items-center px-4 py-3 bg-white border-b border-gray-100">
        <Link href="/chat" className="mr-3">
          <ArrowLeftIcon className="w-6 h-6 text-gray-600" />
        </Link>
        <span className="text-lg font-medium text-gray-800">对话设置</span>
      </div>

      <div className="space-y-4 p-4">
        {/* Bot Info */}
        <ChatBotInfo
          name="机器人名称"
          description="机器人功能介绍功能介绍功能介绍功能介绍功能介绍功能介绍"
        />

        {/* Settings Options */}
        <div className="bg-white rounded-lg">
          <SettingsOption
            title="推荐给朋友"
            onClick={() => {}}
          />
          <SettingsOption
            title="音色设置"
            value="机器小兰"
            onClick={() => {}}
          />
          <SettingsOption
            title="字号设置"
            onClick={() => {}}
          />
          <SettingsOption
            title="反馈"
            onClick={() => {}}
          />
        </div>

        {/* Clear History Button */}
        <button className="w-full p-4 bg-white rounded-lg text-left text-gray-800">
          清除上下文理解
        </button>

        {/* Chat History */}
        <div className="bg-white rounded-lg p-4">
          <div className="flex items-center justify-between mb-4">
            <span className="text-gray-600">对话历史</span>
            <button className="text-gray-400">
              <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
              </svg>
            </button>
          </div>
          <div className="space-y-4">
            {chatHistory.map((item, index) => (
              <div key={index} className="flex items-center justify-between text-sm">
                <span className="text-gray-800">{item.title}</span>
                <span className="text-gray-500">{item.date}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default ChatSettings;